<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>服务器推送事件</title>
</head>
<body>
<div>
    <div id="data"></div>
    <div id="result"></div><br/>
</div>
<script th:inline="javascript" >
    //服务器推送事件
    if (typeof (EventSource) !== "undefined") {
        //第一种写法
        //接收服务器倒计时时间推送，使用HTML5 服务器发送事件(Server-Sent Events)，参考资料：https://www.runoob.com/html/html5-serversentevents.html
        var source = new EventSource("/sse/countDown");
        console.log(source);

        source.addEventListener("countDown", function(e) {
            document.getElementById("result").innerHTML = e.data;
        }, false);//使用false表示在冒泡阶段处理事件，而不是捕获阶段。

        //第二种写法
        //随机数获取
        var source1 = new EventSource("/sse/retrieve");
        //当抓取到消息时
        source1.onmessage = function (evt) {
            document.getElementById("data").innerHTML = "股票行情：" + evt.data;
        };
    } else {
        //注意：ie浏览器不支持
        document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 server-sent 事件...";
        var xhr;
        var xhr2;
        if (window.XMLHttpRequest){
            //IE7+, Firefox, Chrome, Opera, Safari浏览器支持该方法
            xhr=new XMLHttpRequest();
            xhr2=new XMLHttpRequest();
        }else{
            //IE6, IE5 浏览器不支持，使用ActiveXObject方法代替
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
            xhr2=new ActiveXObject("Microsoft.XMLHTTP");
        }
        console.log(xhr);
        console.log(xhr2);
        xhr.open('GET', '/sse/countDown');
        xhr.send(null);//发送请求
        xhr.onreadystatechange = function() {
            console.log("s响应状态：" + xhr.readyState);
            //2是空响应，3是响应一部分，4是响应完成
            if (xhr.readyState > 2) {
                //这儿可以使用response(对应json)与responseText（对应text）
                var newData = xhr.response.substr(xhr.seenBytes);
                newData = newData.replace(/\n/g, "#");
                newData = newData.substring(0, newData.length - 1);
                var data = newData.split("#");
                console.log("获取到的数据：" + data);
                document.getElementById("result").innerHTML = data;
                //长度重新赋值,下次截取时需要使用
                xhr.seenBytes = xhr.response.length;
            }
        }

        xhr2.open('GET', '/sse/retrieve');
        xhr2.send(null);//发送请求
        xhr2.onreadystatechange = function() {
            console.log("s响应状态：" + xhr2.readyState);
            //0: 请求未初始化，2 请求已接收，3 请求处理中，4  请求已完成，且响应已就绪
            if (xhr2.readyState > 2) {
                //这儿可以使用response(对应json)与responseText（对应text）
                var newData1 = xhr2.response.substr(xhr2.seenBytes);
                newData1 = newData1.replace(/\n/g, "#");
                newData1 = newData1.substring(0, newData1.length - 1);
                var data1 = newData1.split("#");
                console.log("获取到的数据：" + data1);
                document.getElementById("data").innerHTML = data1;
                //长度重新赋值,下次截取时需要使用
                xhr2.seenBytes = xhr2.response.length;
            }
        }
    }
</script>
</body>
</html>